<script>
var ProgressBarWith2Value = {
  name: 'ProgressBarWith2Value',
  template: '<div class="progress-bar-with-2-value" :style="{height: height, lineHeight: height, backgroundColor: backgroundColor}">\n' +
      '    <div class="progress" :style="{backgroundColor: color1}" ref="progress1">{{value1}}</div>\n' +
      '    <div class="progress" :style="{backgroundColor: color2}" ref="progress2">{{value2}}</div>\n' +
      '  </div>',
  props: {
    value1: {
      type: Number,
      default: function () {
        return 0
      },
      validate: function (value) {
        return value >= 0
      }
    },
    value2: {
      type: Number,
      default: function () {
        return 0
      },
      validate: function (value) {
        return value >= 0
      }
    },
    height: {
      type: String,
      default: function () {
        return '5px'
      }
    },
    backgroundColor: {
      type: String,
      default: function () {
        return 'rgba(66,160,222,0.2)'
      }
    },
    color1: {
      type: String,
      default: function () {
        return '#24dcf7'
      }
    },
    color2: {
      type: String,
      default: function () {
        return '#ff0000'
      }
    }
  },
  mounted: function () {
    var self = this
    var total = parseFloat(this.value1 + this.value2)
    self.$refs.progress1.style.width = (parseFloat(this.value1) / total * 100.0) + '%';
    self.$refs.progress2.style.width = (parseFloat(this.value2) / total * 100.0) + '%';
  },
}
export default ProgressBarWith2Value
</script>
<style scoped>
@import './progress-bar-with-2-value.css';
</style>
